<template>
  <view>
    <view class="goods_item">

      <view class="goods_item_left">
        <label class="radio" v-if="showRadio">
          <radio value="" color="#c00000" :checked="goods.goods_state" @click="changeRadio" />
        </label>
        <image :src="goods.goods_small_logo||defaultPic" mode=""></image>
      </view>
      <view class="goods_item_right">
        <text>{{goods.goods_name}}</text>
        <view class="goodsPrice">
          <text>￥{{goods.goods_price}}.00</text>
          <uni-number-box :value="goods.goods_count"  @change="changeValue" v-if="showRadio"   :min="1" :max="10" @blur="changeValue1"/>
        </view>
      </view>
    </view>
    
  </view>
</template>

<script>
  import {
    mapMutations
  } from "vuex"
  export default {
    props: {
      goods: {
        type: Object,
        default: {}
      },
      showRadio: {
        type: Boolean,
        default: false
      }

    },
    name: "MyGoodsItem",
    data() {
      return {
        defaultPic: 'https://img3.doubanio.com/f/movie/8dd0c794499fe925ae2ae89ee30cd225750457b4/pics/movie/celebrity-default-medium.png',
      };
    },
    methods: {
      ...mapMutations('cartStore', ['changeGoodsStatus','changeGoodsNum']),
      changeRadio() {
        this.goods.goods_state = !this.goods.goods_state
        this.changeGoodsStatus({
          goods_id: this.goods.goods_id,
          goods_state: this.goods.goods_state
        })
      },
      changeValue1(e){
        if(isNaN(parseInt(e.target.value))){
          this.changeGoodsNum({
            goods_id: this.goods.goods_id,
            goods_count: 1
          })
        }
      },
      changeValue(e) {
        
        this.changeGoodsNum({
          goods_id: this.goods.goods_id,
          goods_count: e
        })
      },
    },
   

  }
</script>

<style lang="scss">
  .goods_item {
    padding: 0 5px;
    display: flex;
    height: 200rpx;

    .goods_item_left {
      flex: 2;
      display: flex;
      justify-content: center;
      align-items: center;

      image {
        width: 100%;
        height: 100%;
      }
    }

    .goods_item_right {
      flex: 5;
      margin-left: 5px;
      display: flex;
      flex-direction: column;
      justify-content: space-around;

      & text:nth-child(1) {
        font-size: 14px;
        font-weight: bold;
      }

      .goodsPrice {
        display: flex;
        justify-content: space-between;

        text {
          color: #c00000;
          font-size: 14px;
          font-weight: bold;
        }
      }
    }
  }
</style>
